<template>
  <div>
    <!-- 页面,面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 在cat里边呢 卡片 -->
    <el-card class="box-card">
      <!-- 按钮 -->
      <el-button type="primary" @click="showCategoryAdd"> 添加分类
      </el-button>
      <!-- table -->
      <zk-table ref="table" sum-text="sum" :index-text="props.indexText"
                :data="zkdata" :columns="columns" :stripe="props.stripe"
                :border="props.border" :show-header="props.showHeader"
                :show-row-hover="props.showRowHover"
                :show-index="props.showIndex" :tree-type="props.treeType"
                :is-fold="props.isFold" :selection-type="props.selectionType">
        <template slot="isok" slot-scope="scop">
          <i v-if="scop.row.cat_deleted === false" style="color: lawngreen"
             class="el-icon-success"> </i>
          <i v-else class="el-icon-error"> </i>
        </template>
        <template slot="order" slot-scope="scop">
          <el-tag v-if="scop.row.cat_level === 0">一级 </el-tag>
          <el-tag type="success" v-else-if="scop.row.cat_level === 1">二级
          </el-tag>
          <el-tag type="warning" v-else>三级 </el-tag>
        </template>
        <template slot="opt">
          <el-button type="primary" size="mini" icon="el-icon-edit">编辑
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete">删除
          </el-button>
        </template>
      </zk-table>
      <!-- 分页组件 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.pagenum"
                     :page-sizes="[10, 20, 30,]" :page-size="queryInfo.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加分类 -->
    <el-dialog title="添加分类" :visible.sync="dialogCategoryAdd"
               @close="categoryFormClose" >
      <el-form ref="categoryFormRef" :model="addForm" :rules="rules"
               label-width="80px" class="demo-ruleForm">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader  v-model="selectVal" :options="options"
                       :props='cateProps' clearable @change='cateChg'>
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCategoryAdd = false">取 消</el-button>
        <el-button type="primary" @click="categoryAdd">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  mounted () {
    this.getCategorieList()
  },
  data () {
    return {
      // 配置渲染的字段
      cateProps: {
        // 改为false必须选择子节点
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
      },
      options: [],
      selectVal: [],
      /* 如果后台对参数个数有要求 */
      addForm: {
        cat_name: '',
        cat_level: 0,
        cat_pid: 0
      },
      rules: {
        cat_name: [
          { required: true, message: '必填的', trigger: 'blur' },
        ]
      },
      dialogCategoryAdd: false,
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      props: {
        stripe: false,
        // 添加表格的竖线
        border: true,
        // 显示表头
        showHeader: true,
        // showSummary: false,
        showRowHover: true,
        // 显示序号
        showIndex: true,
        // 修改序号列的名字
        indexText: '序号',
        treeType: true,
        // 默认是折叠起来的,false变成展开的
        isFold: true,
        // 是否显示复选框
        selectionType: false,
      },
      zkdata: [],
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          width: '400px',
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          minWidth: '50px',
          type: 'template',
          template: 'isok',
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          template: 'order',
        },
        {
          label: '操作',
          prop: 'likes',
          minWidth: '200px',
          type: 'template',
          template: 'opt',
        },
      ],
    };
  },
  methods: {
    // 表单的数据清空掉
    categoryFormClose () {
      // 将表单的数据初始化
      this.$refs.categoryFormRef.resetFields();
      // 将级联初始化
      this.selectVal = []
    },
    async categoryAdd () {
      console.log(this.addForm)
      /* 拿到form校验, */
      this.$refs.categoryFormRef.validate(async (valid) => {
        // 如果是false,表单数据有问题
        if (!valid) {
          return this.$message.error('数据出错,检查表单')
        }
        const { data: { data, meta } } = await this.$axios.post('categories', this.addForm)
        console.log(data, meta)
        if (meta.status !== 201) {
          return this.$message.error("创建失败了")
        }
        this.dialogCategoryAdd = false
        /* 重新渲染页面 */
        this.getCategorieList();
      })
    },
    // 显示后台的数据
    async showCategoryAdd () {
      // 获取后台的数据
      const { data: { data, meta } } = await this.$axios.get('categories', { params: { type: 2 } })
      if (meta.status !== 200) {
        return this.$message.error('出错了')
      }
      this.options = data
      console.log(data, meta)
      this.dialogCategoryAdd = true
    },
    // 获取父类的id和层级数
    cateChg (val) {
      console.log(this.selectVal, val)
      const length = this.selectVal.length
      // 获取最后的数据,来当成pid
      this.addForm.cat_pid = this.selectVal[length - 1]
      // 获取当前的层数
      this.addForm.cat_level = length
      // 暂定
      // this.cat_pid = this.selectVal.pop()
    },
    handleSizeChange (newsize) {
      // console.log('修改查询的条数', newsize)
      this.queryInfo.pagesize = newsize;
      // 重新的调用查询的方法
      this.getCategorieList()
    },
    handleCurrentChange (newpage) {
      // console.log("跳转到第几页", newpage)
      this.queryInfo.pagenum = newpage
      // 重新的调用查询的方法
      this.getCategorieList()
    },
    async getCategorieList () {
      const { data: { data, meta } } = await this.$axios.get("categories", { params: this.queryInfo })
      console.log(data, meta)
      if (meta.status !== 200) {
        return this.$message.error('获取商品分类失败')
      }
      this.zkdata = data.result
      this.total = data.total
      this.$message.success('获取商品分类成功')
    }
  }
}
</script>
<style lang="css" scoped>
.box-card {
  /* button行内块元素 */
  text-align: left;
}
.el-cascader {
  width: 100%;
}

</style>
